<!--
 * @Author: @yzcheng
 * @Date: 2021-03-11 18:02:18
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-27 12:03:32
-->
<template>
  <el-dialog
    :title="info.type === 5 ? $t('flowTask.free', [info.title]) : info.title"
    :model-value="visible"
    @close="onClose"
    :width="500"
  >
    <el-form ref="form" size="small" label-width="80px" :rules="rules">
      <el-row gutter="30">
        <el-col v-if="info.type !== 5" :xl="22">
          <el-form-item
            label-width="20%"
            :label="$t('flowTask.detailsForm.currentLink')"
          >
            {{ processInfo.name }}
          </el-form-item>
        </el-col>
        <el-col v-if="info.type === 2" :xl="22">
          <el-form-item
            label-width="20%"
            :label="$t('flowTask.which', [info.title])"
          >
            <CTabel />
          </el-form-item>
        </el-col>
        <el-col v-if="info.type !== 2 && info.type !== 5 &&info.type !== 7" :xl="22">
          <el-form-item
            label-width="20%"
            :label="$t('flowTask.personnel', [info.title])"
          >
            <el-input
              @click="dialogUser = !dialogUser"
              readonly
              v-model="processInfo.userCode"
              :placeholder="
                $t('validate.pleaseFillIn', [
                  $t('flowTask.personnel', [info.title]),
                ])
              "
            >
              <template #suffix>
                <i class="el-icon-search el-input__icon"> </i>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="22">
          <el-form-item
            prop="flowName"
            label-width="20%"
            :label="$t('flowTask.why', [info.title])"
          >
            <el-input v-model="processInfo.comment" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="24" :offset="4">
          <el-form-item :label-width="'0px'">
            <el-button @click="$emit('submit', info.type)" type="primary">{{
              $t("button.submit")
            }}</el-button>
            <el-button @click="onClose">{{ $t("common.close") }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <User @ok="ok" v-model:visible="dialogUser" />
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import User from "@/views/process/components/userInfo/user.vue";
import CTabel from "./table.vue";
export default {
  data() {
    return {
      dialogUser: false,
    };
  },
  components: {
    User,
    CTabel,
  },
  computed: {
    ...mapState("flowTaskStore", ["processInfo"]),
  },
  emits: ["update:visible", "submit"],
  props: {
    visible: Boolean,
    info: Object,
  },
  methods: {
    onClose() {
      this.$emit("update:visible", false);
    },
    ok(item) {
      this.processInfo.userCode = item[0].name;
    },
  },
};
</script>

<style>
</style>
